<template>
  <div class="container-three-box">
      <div class="view-box" id="model-id">

      </div>
  </div>
</template>

<script setup >
  import * as THREE from 'three';
  import {reactive,onMounted} from 'vue'
  const state=reactive({
      title:'加载模型',
      domId:'model-id'
  })

  const renderThree=()=>{
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.getElementById(state.domId).appendChild( renderer.domElement );

      const geometry = new THREE.BoxGeometry( 1, 1, 1 );
      const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

      // cube
      const cube = new THREE.Mesh( geometry, material );
      
      // cube加入场景
      scene.add( cube );

      camera.position.z = 5;

      // 旋转
      function animate() {
          requestAnimationFrame( animate );

          cube.rotation.x += 0.01;
          cube.rotation.y += 0.01;

          renderer.render( scene, camera );
      }

      animate();
  }

  onMounted(()=>{
      renderThree()
  })
</script>

<style >
  .view-box{
      width:600px;
      height: 600px;
  }
</style>


